<template>
  <div class="item">
    <div class="img-box" :style="{ backgroundImage: `url(${user.p})` }"></div>
    <div class="mindle">
      <div>
        <span class="my-text name">{{ user.n }}</span
        ><span class="lv">lv{{ user.lvl }}</span>
      </div>
      <div class="age">{{ user.title }}</div>
    </div>
    <div class="btn" @click="changeAtt">{{ !isAtt ? "关注" : "已关注" }}</div>
  </div>
</template>

<script>
export default {
  props: ["user"],
  data: () => {
    return {
      isAtt: false,
    };
  },
  methods: {
    changeAtt() {
      this.api.payAttention(this.user, this.isAtt);
      this.$toast.success("操作成功");
      this.isAtt = !this.isAtt;
    },
  },
  created() {
    let list = JSON.parse(localStorage.getItem("attentionList")) || [];
    this.isAtt =
      list.some(
        (item) => item.id == this.user.id || item.user_id == this.user.id
      ) || false;
  },
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 0.1rem 0;
  font-size: 0.15rem;
  color: var(--text-black);
  .img-box {
    min-width: 0.4rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    margin-right: 0.1rem;
  }
  .mindle {
    flex-grow: 1;
    .name {
      font-weight: bold;
    }
    .lv {
      font-size: 0.12rem;
      color: var(--text-lv);
      margin-left: 0.05rem;
    }
    .age {
      font-size: 0.13rem;
      color: var(--text-gray);
      margin-top: 0.05rem;
    }
  }
  .btn {
    min-width: 0.75rem;
    width: 0.75rem;
    height: 0.32rem;
    border-radius: 0.16rem;
    line-height: 0.32rem;
    text-align: center;
    background-color: var(--bgc-yellow);
    margin-left: 0.1rem;
  }
}
</style>